<template>
  <div class="input-number-inner">
    <w-input v-model='inputValue' center :disabled="disabled" @change="handleChange">
      <div
        class="cursor-pointer"
        :class="{'is-disabled':decreaseDisabled }"
        slot="prepend"
        @click="handleClick('decrease')"
      >
        <w-icon name="yiliao_danao"></w-icon>
      </div>
      <div
        class="cursor-pointer"
        :class="{'is-disabled':increaseDisabled}"
        slot="append"
        @click="handleClick('increase')"
      >
        <w-icon name="yiliao_danao"></w-icon>
      </div>
    </w-input>
  </div>
</template>

<script>
export default {
  name: "wInputNumber",
  props: {
    value: {
      type: [Number,String],
    },
    step: {
      type: Number,
      default: 1,
    },
     max: {
      type: Number,
      default: +Infinity,
    },
     min: {
      type: Number,
      default: -Infinity,
    },
    disabled:{
        type:Boolean,
        default:false
    },
      precision:{
        type:Number,
        default:1
    }
  },
  computed:{
      inputValue:{
          get(){
              return this.value
          },
          set(newValue){
              let limit=[
                   {
                      validate:(value)=>!this.isNumber(value),
                      res:this.inputValue
                  },
                  {
                      validate:(value)=>value>=this.max,
                      res:this.max
                  },
                  {
                      validate:(value)=>value<=this.min,
                      res:this.min
                  },{
                      validate:(value)=>value,
                      res:newValue*1
                  }
              ];
              let _value=limit.find(v=>v.validate(newValue)).res
            //   this.$emit('input', _value);
            this.$emit('input', _value.toFixed(this.precision));
          }
      },
      decreaseDisabled(){
          return this.disabled||this.inputValue<=this.min
      },
       increaseDisabled(){
           console.log(1321);
          return this.disabled||this.inputValue>=this.max
       },
  },
  data() {
    return {
        // inputValue:this.value
    };
  },

  mounted() {},

  methods: {
      handleChange(){
          console.log(32);
          this.$forceUpdate();
      },

   isNumber(num){
       return !isNaN(num*1)&&Object.prototype.toString.call(num*1)==='[object Number]'
   },
    handleClick(type) {
      if (type === "increase") {
          if(this.increaseDisabled)return
        this.inputValue =Number( this.inputValue)+ this.step;
      } else {
          if(this.decreaseDisabled)return
        this.inputValue = Number( this.inputValue)-this.step;
      }
    },
  },
};
</script>

<style scoped>
@import "./indexNumber.css";
.input-number-inner {
  width: 150px;
}
</style>